<script setup lang="ts">
import { ref, reactive, markRaw } from 'vue'
import {
  NIcon,
  NInput
} from 'naive-ui'
import {
  Search12Regular as Search
} from '@vicons/fluent'
import sections from './data-entry/section.vue'
import sectionInfo from './data-entry/section-info.vue'
import esections from './data-entry/esections.vue'
import platforms from './data-entry/platforms.vue'
import signals from './data-entry/signals.vue'
import stations from './data-entry/stations.vue'
import structures from './data-entry/structures.vue'
import turnoutSection from './data-entry/turnout-section.vue'
import turnouts from './data-entry/turnouts.vue'
const data = ref()

const headerIndex = reactive({
  type: [
    {
      title: '轨道逻辑区段',
      name: 'sections',
      comName: markRaw(sections)
    },
    {
      title: '轨道区段',
      name: 'sectionInfo',
      comName: markRaw(sectionInfo)
    },
    {
      title: '结构物',
      name: 'structures',
      comName: markRaw(structures)
    },
    {
      title: '供电分区',
      name: 'esections',
      comName: markRaw(esections)
    },
    {
      title: '道岔',
      name: 'turnouts',
      comName: markRaw(turnouts)
    },
    {
      title: '道岔与岔尾区段表',
      name: 'turnoutSection',
      comName: markRaw(turnoutSection)
    },
    {
      title: '信号机',
      name: 'signals',
      comName: markRaw(signals)
    },
    {
      title: '站台',
      name: 'platforms',
      comName: markRaw(platforms)
    },
    {
      title: '车站',
      name: 'stations',
      comName: markRaw(stations)
    }
  ]
})

const emit = defineEmits(['click'])
const defaultClass = ref('sections')
const switchComp = (val: Object, name:string) => {
  emit('click', val)
  defaultClass.value = name
}
</script>

<template>
  <div class="header">
    <n-input v-model:value="data" round>
      <template #prefix>
        <n-icon size="20" color="#ffffff" :component="Search" />
      </template>
    </n-input>
    <ul>
      <li @click="switchComp(item.comName,item.name)" v-for="(item,index) in headerIndex.type"
        :class="{ 'active':defaultClass === item.name }" :key="index" :name="item.name">
        {{item.title}}
      </li>
    </ul>
  </div>
</template>

<style scoped lang="less">
.header {
  width: calc(100% - 20px);
  height: 40px;
  .n-input {
    width: 20vw;
    height: 40px;
    vertical-align: middle;
  }

  .n-input-wrapper {
    width: 400px;
    height: 40px;
    background: #282730;
    border-radius: 200px;
  }

  ul {
    list-style-type: none;
    display: inline-block;
    margin: 0;
    padding: 0 30px;
    vertical-align: middle;
    li {
      display: inline-block;
      background: #18171D;
      font-size: 14px;
      border-radius: 4px;
      border: 1px solid #5A5A62;
      margin: 0 5px;
      padding: 0 12px;
      line-height: 38px;
      cursor: pointer;
    }

    .active {
      background: #232031;
      border: 1px solid #3C3654;
      color: #B59BFF;
    }
  }
}
</style>
